<template>
	<view>
		<Header :showBack="true" title="绑定会员卡"></Header>
		
		<view class="top">
			<view class="ava">
				<open-data style="width: 100%; height: 100%;" type="userAvatarUrl"></open-data>
			</view>
			
			<view class="name">
				<open-data type="userNickName" lang="zh_CN"></open-data>
			</view>
		</view>
		
		<view class="cardNum">
			<view>请输入您的卡号</view>
			<input v-model="cardNum" type="text" value="" />
		</view>
		<button style="background-color:rgb(7,193,96) ;" class="button"  @click="bindCard">绑定</button>
	</view>
</template>

<script>
	var WXBizDataCrypt = require('@/utils/RdWXBizDataCrypt.js');
	export default {
		data() {
			return {
				cardNum:'',
				wxOpenId:uni.getStorageSync('openId'),
			}
		},
		methods: {
			bindCard(){
				this.$http('/minprogram/api/member/bindMemberCard',{
						    "cardNo":this.cardNum,
						    "wxOpenId":this.wxOpenId
						},res=>{
							uni.hideLoading()
							uni.reLaunch({
								url:'/pages/index/index?type=1'
							})
						})
			}
		},
		onLoad() {}
	}
</script>

<style scoped lang="less">
	.ava{
		width: 200upx;
		height: 200upx;
		border-radius: 50%;
		overflow: hidden;
		margin: 0 auto 0;
	}
	.name{
		width: 100%;
		text-align: center;
		margin-top: 2vh;
	}
	.top{
		width: 93%;
		margin: 0 auto;
		background-color: #FFFFFF;
		border-radius: 10upx;
		padding: 100upx 0 50upx;
		margin-top: 20upx;
	}
	.cardNum{
		width: 93%;
		margin: 1vh auto 8vh;
		background-color: #FFFFFF;
		border-radius: 10upx;
		padding-bottom: 10upx;
		>view{
			height: 96upx;
			font-size: 30upx;
			line-height: 96upx;
			width: 100%;
			text-align: center;
		}
		>input{
			border: 1upx solid #cccccc;
			margin: 3vh auto;
			background-color: #FFFFFF;
			width: 90%;
			height: 96upx;
			box-sizing: border-box;
			padding: 0 30upx;
			border-radius: 10upx;
		}
	}
	.button{
		width: 90%;
		height: 96upx;
		line-height: 96upx;
		text-align: center;
		color: #FFFFFF;
		font-size: 30upx;
		margin: 30upx auto;
		border-radius: 10upx;
	}
</style>
